<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
	   var getRandomColor = function(){ 
		  return  '#' +    
			(function(color){    
			return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    
			  && (color.length == 6) ?  color : arguments.callee(color);    
		  })('');    
		} 
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var data = [{
    name: '唐',
    itemStyle: {
        color: getRandomColor()
    },
    children: [{
        name: '赵',
        value: 1,
        itemStyle: {
            color: getRandomColor()
        },
        children: [{
            name: '赵一书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }, {
            name: '赵二书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }, {
            name: '赵三书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }]
    }, {
        name: '钱',
        itemStyle: {
            color: getRandomColor()
        },
        children: [{
            name: '钱一书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }]
    }]
},{
    name: '宋',
    itemStyle: {
        color: getRandomColor()
    },
    children: [{
        name: '赵',
        value: 1,
        itemStyle: {
            color: getRandomColor()
        },
        children: [{
            name: '赵一书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }, {
            name: '赵二书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }]
    }, {
        name: '钱',
        itemStyle: {
            color: getRandomColor()
        },
        children: [{
            name: '钱一书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }, {
            name: '钱二书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }, {
            name: '钱三书',
            value: 1,
            itemStyle: {
                color: getRandomColor()
            }
        }]
    }]
}];

option = {
    title: {
        text: 'WORLD COFFEE RESEARCH SENSORY LEXICON',
        subtext: 'Source: https://worldcoffeeresearch.org/work/sensory-lexicon/',
        textStyle: {
            fontSize: 14,
            align: 'center'
        },
        subtextStyle: {
            align: 'center'
        },
        sublink: 'https://worldcoffeeresearch.org/work/sensory-lexicon/'
    },
    series: {
        type: 'sunburst',
        highlightPolicy: 'ancestor',
        data: data,
        radius: [0, '95%'],
        sort: null,
        levels: [{}, {
            r0: '15%',
            r: '35%',
            itemStyle: {
                borderWidth: 2
            },
            label: {
                rotate: 'tangential'
            }
        }, {
            r0: '35%',
            r: '70%',
            label: {
                align: 'right'
            }
        }, {
            r0: '70%',
            r: '72%',
            label: {
                position: 'outside',
                padding: 3,
                silent: false
            },
            itemStyle: {
                borderWidth: 3
            }
        }]
    }
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>